<template>
	<view class="wrapper index">
		<myheader type="2">
			<div class="space-around f20 cfff topname">
				<div>{{$t("my.pai")}}：{{info.id}}</div>
				<div>{{$t("my.tui")}}：{{info.tgrs}}</div>
				<div>{{$t("my.deng")}}：{{info.state_level}}</div>
			</div>
		</myheader>
		<scroll-view scroll-y="true" class="main">
			<div class="page-main cfff">
				<view class="btheme">
					<div class="border-box f26">
						<div class="center">
							{{$t("my.zi")}}: <div class="flex1">
								<image src="../../static/my1.png" mode="widthFix" class="wallet-icon"></image>
							</div>
						</div>
						<div class="center mt40 mb40">
							{{$t("my.yue")}}: <div class="flex1">BNB:{{info.money}}</div>
							<!-- <div class="flex1">AIT:0</div> -->
						</div>
						<div class="center mt40 mb40">
							{{$t("my.shou")}}: <div class="flex1">BNB:{{info.price}}</div>
							<!-- <div class="flex1">AIT:0</div> -->
						</div>
						<div class="space-between fWrap">
							<div class="bfff ctheme f22" @click="show=true">{{$t("my.chong")}}</div>
							<div class="bfff ctheme f22" @click="show1=true">{{$t("my.tixian")}}</div>
							<div class="bfff ctheme f22" @click="show2=true">{{$t("my.hu")}}</div>
							<div class="bfff ctheme f22" @click="show3=true">{{$t("my.tiqu")}}</div>
						</div>
					</div>
				</view>
				<div class="btheme mt30">
					<div class="border-box flex-start fWrap cfff">
						<div class="center nav-box" @click="open('./record?type=0')">
							<image src="../../static/my2.png" mode="widthFix" class="nav-icon mr15"></image>
							<div class="flex1 f24">
								<div>{{$t("my.zong")}}</div>
								<div>{{earnings.zongshouyi}}BNB</div>
							</div>
							<image src="../../static/arr.png" mode="widthFix" class="arr-icon"></image>
						</div>
						<!-- <div class="center nav-box">
							<image src="../../static/my2.png" mode="widthFix" class="nav-icon mr15"></image>
							<div class="flex1 f24">
								<div>{{$t("my.liu")}}</div>
							</div>
							<image src="../../static/arr.png" mode="widthFix" class="arr-icon"></image>
						</div> -->
						<div class="center nav-box" @click="open('./record?type=7')">
							<image src="../../static/my2.png" mode="widthFix" class="nav-icon mr15"></image>
							<div class="flex1 f24">
								<div>{{$t("my.gong")}}</div>
								<div>{{earnings.tixian}}BNB</div>
							</div>
							<image src="../../static/arr.png" mode="widthFix" class="arr-icon"></image>
						</div>
						<div class="center nav-box" @click="open('./record?type=6')">
							<image src="../../static/my2.png" mode="widthFix" class="nav-icon mr15"></image>
							<div class="flex1 f24">
								<div>{{$t("my.shengg")}}</div>
								<div>{{earnings.chongzhi}}BNB</div>
							</div>
							<image src="../../static/arr.png" mode="widthFix" class="arr-icon"></image>
						</div>
						<!-- <div class="center nav-box">
							<image src="../../static/my2.png" mode="widthFix" class="nav-icon mr15"></image>
							<div class="flex1 f24">
								<div>{{$t("my.suan")}}</div>
								<div>0.0000BNB</div>
							</div>
							<image src="../../static/arr.png" mode="widthFix" class="arr-icon"></image>
						</div> -->
						<div class="center nav-box" @click="open('./record?type=5')">
							<image src="../../static/my2.png" mode="widthFix" class="nav-icon mr15"></image>
							<div class="flex1 f24">
								<div>{{$t("my.shengs")}}</div>
								<div>{{earnings.fenhong}}BNB</div>
							</div>
							<image src="../../static/arr.png" mode="widthFix" class="arr-icon"></image>
						</div>
						<div class="center nav-box" @click="open('./record?type=3')">
							<image src="../../static/my2.png" mode="widthFix" class="nav-icon mr15"></image>
							<div class="flex1 f24">
								<div>{{$t("my.shang")}}</div>
								<div>{{earnings.shangxia}}BNB</div>
							</div>
							<image src="../../static/arr.png" mode="widthFix" class="arr-icon"></image>
						</div>
						<div class="center nav-box" @click="open('./record?type=2')">
							<image src="../../static/my2.png" mode="widthFix" class="nav-icon mr15"></image>
							<div class="flex1 f24">
								<div>{{$t("my.zuo")}}</div>
								<div>{{earnings.zuoyou}}BNB</div>
							</div>
							<image src="../../static/arr.png" mode="widthFix" class="arr-icon"></image>
						</div>
						<div class="center nav-box noBottom" @click="open('./record?type=1')">
							<image src="../../static/my2.png" mode="widthFix" class="nav-icon mr15"></image>
							<div class="flex1 f24">
								<div>{{$t("my.fen")}}</div>
								<div>{{earnings.fenxiang}}BNB</div>
							</div>
							<image src="../../static/arr.png" mode="widthFix" class="arr-icon"></image>
						</div>
						<div class="center nav-box noBottom" @click="open('./record?type=4')">
							<image src="../../static/my2.png" mode="widthFix" class="nav-icon mr15"></image>
							<div class="flex1 f24">
								<div>{{$t("my.tuan")}}</div>
								<div>{{earnings.tuandui}}BNB</div>
							</div>
							<image src="../../static/arr.png" mode="widthFix" class="arr-icon"></image>
						</div>
						<!-- <div class="center nav-box">
							<image src="../../static/my2.png" mode="widthFix" class="nav-icon mr15"></image>
							<div class="flex1 f24">
								<div>{{$t("my.suan")}}</div>
								<div>0.0000BNB</div>
							</div>
							<image src="../../static/arr.png" mode="widthFix" class="arr-icon"></image>
						</div> -->
					</div>
				</div>
			</div>
		</scroll-view>
		<!-- 充值 -->
		<u-modal :show="show" closeOnClickOverlay="true" :title="$t('my.chong')" @confirm="confirm" @close="show=false"
			width="540rpx">
			<u-input v-model="money" type="number" :placeholder="$t('placeholder')+$t('my.shu')">
				<template #suffix>
					BNB
				</template>
			</u-input>
		</u-modal>
		<!-- 提现 -->
		<u-modal :show="show1" closeOnClickOverlay="true" :title="$t('my.tixian')" @confirm="confirm1"
			@close="show1=false" width="590rpx">
			<div>
				<u-input v-model="money" type="number" :placeholder="$t('placeholder')+$t('my.shu')">
					<template #suffix>
						BNB
					</template>
				</u-input>
				<div class="f20 c666 mt30 mb5">1.{{$t('my.alert1')}}0.1</div>
				<div class="f20 c666">2.{{$t('my.alert2')}}</div>
			</div>
		</u-modal>
		<!-- 互转 -->
		<u-modal :show="show2" closeOnClickOverlay="true" :title="$t('my.hu')" @confirm="confirm2" @close="show2=false"
			width="540rpx">
			<div>
				<div class="f20 ctheme mb30">{{$t('my.yue')}}{{info.money}} BNB</div>
				<u-input type="number" v-model="money" :placeholder="$t('placeholder')+$t('my.shu')">
					<template #suffix>
						BNB
					</template>
				</u-input>
				<u-input class="mt30" v-model="tpaddress" type="text" :placeholder="$t('placeholder')+$t('my.dizhi')">
				</u-input>
			</div>
		</u-modal>
		<!-- 提取收益 -->
		<u-modal :show="show3" closeOnClickOverlay="true" :title="$t('my.tiqu')" @confirm="confirm3"
			@close="show3=false" width="540rpx">
			<div>
				<div class="f20 c999 mb30">{{$t('my.shou')}}0 BNB</div>
				<div class="f40 c333">{{$t('my.tishou')}}</div>
			</div>

		</u-modal>
	</view>
</template>

<script>
	import myheader from '@/components/myheader/myheader'
	export default {
		data() {
			return {
				loading: true,
				show: false,
				show1: false,
				show2: false,
				show3: false,
				info: {},
				money: '',
				tpaddress: '',
				earnings: {}
			}
		},
		components: {
			myheader
		},
		computed: {

		},
		onShow() {
			// 未登录前往登陆页面
			if (!uni.getStorageSync('uinfo')) {
				this.open('../login/login', 3)
			} else {
				// this.info = uni.getStorageSync('uinfo')
			}
			// 未初始化初始化
			if (!this.connected) {
				this.initWeb3((tpaddress) => {})
			}
		},
		onLoad() {
			this.getmyInfo()

		},
		methods: {
			// 获取个人信息
			getmyInfo() {
				this.$http('user/myInfo').then(r => {
					this.info = r
				})
				this.$http('user/earnings').then(r => {
					this.earnings = r
				})
			},
			// 确认充值
			confirm() {
				if (this.money == '') {
					this.sToast(this.$t("placeholdererror"))
					return
				}
				this.transfer(this.money, (r) => {
					this.$http('user/recharge', {
						money: this.money
					}, 'POST', true).then(r => {
						this.sToast(this.$t("my.success"))
						this.money = ''
						this.show = false
						this.getmyInfo()
					})
				})

			},
			// 确认提现
			confirm1() {
				if (this.address <= 0.1) {
					this.sToast(this.$t("placeholdererror"))
					return
				}
				this.$http('user/withdraw', {
					money: this.money
				}, 'POST', true).then(r => {
					this.sToast(this.$t("my.success"))
					this.money = ''
					this.show1 = false
					this.getmyInfo()
				})
			},
			// 确认互转
			confirm2() {
				if (this.address == '' || this.money == '') {
					this.sToast(this.$t("placeholdererror"))
					return
				}
				this.$http('user/interconversion', {
					money: this.money,
					tpaddress: this.tpaddress
				}, 'POST', true).then(r => {
					this.sToast(this.$t("my.success"))
					this.money = ''
					this.tpaddress = ''
					this.show2 = false
					this.getmyInfo()
				})
			},
			// 确认提取收益
			confirm3() {
				this.$http('user/withdrawEarnings', {}, 'POST', true).then(r => {
					this.sToast(this.$t("my.success"))
					this.show3 = false
					this.getmyInfo()
				})
			}
		}
	}
</script>

<style lang="scss">
	.page-main {
		padding: 30rpx;

		.nav-box {
			width: 50%;
			border-bottom: 1rpx solid #ddd;
			height: 100rpx;
			padding: 0 20rpx;
			white-space: nowrap;

			&:nth-of-type(odd) {
				border-right: 1rpx solid #ddd;
				padding: 0 30rpx 0 0;
			}
		}

		.noBottom {
			border-bottom: 0;
		}

		.nav-icon {
			width: 60rpx;
			height: 60rpx;
		}

		.arr-icon {
			width: 40rpx;
			height: 40rpx;
		}

		.border-box {
			border-radius: 20rpx;
			border: 4rpx solid #fff;
			padding: 30rpx;

			.bfff {
				padding: 5rpx 20rpx;
				border-radius: 25rpx;
				box-shadow: 3rpx 1rpx 6rpx 1rpx rgba(160, 24, 102, .2);
			}

			.wallet-icon {
				width: 32rpx;
				height: 25rpx;
			}


		}

		.f26 {
			.flex1 {
				height: 40rpx;
				border-radius: 20rpx;
				padding: 0 16rpx;
				border: 1rpx solid #fff;
				margin-left: 20rpx;
			}
		}

		.btheme {
			box-shadow: 4rpx 0rpx 6rpx 0rpx rgba(0, 0, 0, .2);
			border-radius: 20rpx;
			padding: 10rpx;
		}
	}

	.topname {
		margin-top: 140rpx;
	}

	.income {
		width: 365rpx;
		height: 43rpx;
		line-height: 43rpx;
		background: #FFFFFF;
		box-shadow: 3rpx 1rpx 6rpx 1rpx rgba(160, 24, 102, .1), inset 0rpx 0rpx 6rpx 0rpx rgba(0, 0, 0, .5);
		border-radius: 16rpx;
		padding-left: 70rpx;
		color: #1D47C0;
	}

	.logo1-icon {
		width: 27rpx;
		height: 27rpx;
		top: -10rpx;
	}
</style>